import React, { RefObject } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { Form, Input, Button, Dialog, TextArea, DatePicker, Selector, Slider, Stepper, Switch } from 'antd-mobile';
import { DatePickerRef } from 'antd-mobile/es/components/date-picker';
export interface IProps extends ICompProps {}
TestAntdForm.defaultProps = {} as Partial<IProps>;
function TestAntdForm(props: IProps) {
    const onFinish = (values: any) => {
        console.log(values);

        // Dialog.alert({
        //     content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        // });
    };

    return (
        <>
            <Form
                layout="horizontal"
                onFinish={onFinish}
                footer={
                    <Button block type="submit" color="primary" size="large">
                        提交
                    </Button>
                }>
                <Form.Header>水平布局表单</Form.Header>
                <Form.Item name="name" label="姓名" rules={[{ required: true, message: '姓名不能为空' }]}>
                    <Input onChange={console.log} placeholder="请输入姓名" />
                </Form.Item>
                <Form.Item name="address" label="地址" help="详情地址">
                    <TextArea placeholder="请输入地址" maxLength={100} rows={2} showCount />
                </Form.Item>
                <Form.Item name="delivery" label="送货上门" childElementPosition="right">
                    <Switch />
                </Form.Item>
            </Form>

            <Form
                name="form"
                onFinish={onFinish}
                footer={
                    <Button block type="submit" color="primary" size="large">
                        提交
                    </Button>
                }>
                <Form.Header>竖直布局表单</Form.Header>
                <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
                    <Input placeholder="请输入姓名" />
                </Form.Item>
                <Form.Item name="address" label="地址" help="详情地址">
                    <Input placeholder="请输入地址" />
                </Form.Item>
                <Form.Item
                    name="birthday"
                    label="生日"
                    trigger="onConfirm"
                    onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                        datePickerRef.current?.open();
                    }}></Form.Item>
                <Form.Item name="favoriteFruits" label="喜爱的水果">
                    <Selector
                        columns={3}
                        multiple
                        options={[
                            { label: '苹果', value: 'apple' },
                            { label: '橘子', value: 'orange' },
                            { label: '香蕉', value: 'banana' },
                        ]}
                    />
                </Form.Item>
                <Form.Item name="slider-demo" label="滑块选择">
                    <Slider ticks step={10} />
                </Form.Item>
                <Form.Item name="disabledField" label="禁用" disabled>
                    <Input placeholder="禁止输入" />
                </Form.Item>
            </Form>
        </>
    );
}
export default React.memo(TestAntdForm);
const RootView = styled(View)``;
